iT邦幫忙

0

Sass/Css 設計模式(Smacss) DAY37

  • 分享至 

  • xImage
  •  

今天要來介紹 Sass/Css 設計模式啦~~
首先我們先認識 最好入門的 Smacss
官網: http://smacss.com/


Smacss Base

首先我們可以先利用 Base打好地基
也就是 全站設定
若寫好全站設定
就可以滿足90%的樣式
剩下5~10% 必須客製化的樣式
就蓋掉就好啦~~
這樣就不用連那 90% 的樣式通通要寫一遍
超麻煩!!
Smacss官網 Base介紹: http://smacss.com/book/type-base


當然
我們也可以把 base拆開來單獨做一支 scss檔
https://ithelp.ithome.com.tw/upload/images/20201010/20123039YV5YqUQ6J9.jpg

這裡看一個例子
Pure.css: https://purecss.io/
會發現裡面也有 base
https://unpkg.com/purecss@1.0.1/build/base.css
有興趣的 可以看一下它的 base檔案 是如何撰寫的


Smacss Layout(佈局管理)

有時候我們瀏覽網頁
會發現網頁的某些地方在其他分頁還是會存在
以 Bootstrap4 為例子
Bootstrap4:https://getbootstrap.com/
會發現它的 header 都會存在
這時候我們就可以把它拆出來
單獨做一支 layout的scss
https://ithelp.ithome.com.tw/upload/images/20201010/20123039hVnU61wMHN.jpg


這裡在舉一個 Layout 的例子
在之前我們都習慣把命名語意化
但 Smacss這裡建議
若有許多共同樣式的css
可以抽象化出來
EX:

.bookList{
  color:red;
  width: 100px;
}
.dvdList{
  color:red;
  width: 100px;
}
.cdList{
  color:red;
  width: 100px;
}

會發現他們其實樣式都一樣
但為了語意化而產生許多的css
我們這時候就可以把這些共同樣式改成

// l --> layout(前綴詞)
.l-list{
  color:red;
  width: 100px;
}

那今天的介紹就到這裡啦
明天將介紹 Smacss 的模組化(module)
若有任何問題 或 內容有誤
請不吝色的跟我說唷/images/emoticon/emoticon07.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言